<template>
    <div class="box">
        <div class="infoTable" v-if="qiyeInfo.name">
            <el-row>
                <el-col :span="3"><div class="colstyle">企业名称</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.name }}</div></el-col>
                <el-col :span="3"><div class="colstyle">纳税人识别号</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.taxNumber }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">法人</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.legalPersonName }}</div></el-col>
                <el-col :span="3"><div class="colstyle">是否是小微企业</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.isMicroEnt == 0 ? '否' : '是' }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">企业状态</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.regStatus }}</div></el-col>
                <el-col :span="3"><div class="colstyle">注册日期</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.estiblishTime | formatDate }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">企业评分</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.percentileScore / 100 }}</div></el-col>
                <el-col :span="3"><div class="colstyle">注册资本</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.regCapital }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">经营期限</div></el-col>
                <el-col :span="6">
                    <div class="padding">
                        {{ qiyeInfo.fromTime | formatDate }}
                        <span v-if="qiyeInfo.toTime"> ~ {{ qiyeInfo.toTime |  formatDate}}</span>
                    </div>
                </el-col>
                <!-- {{ qiyeInfo.toTime ? ( qiyeInfo.toTime | formatDate ) : '无固定期限' }} -->
                <el-col :span="3"><div class="colstyle">注册号</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.regNumber }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">人员规模</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.staffNumRange }}</div></el-col>
                <el-col :span="3"><div class="colstyle">登记机关</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.regInstitute }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">行业</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.industry }}</div></el-col>
                <el-col :span="3"><div class="colstyle">注册地址</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.regLocation }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">核准时间</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.approvedTime | formatDate }}</div></el-col>
                <el-col :span="3"><div class="colstyle">参保人数</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.socialStaffNum }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">实收注册资金</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.actualCapital }}</div></el-col>
                <el-col :span="3"><div class="colstyle">企业类型</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.companyOrgType }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle">曾用名</div></el-col>
                <el-col :span="6"><div class="padding">{{ qiyeInfo.historyNames }}</div></el-col>
                <el-col :span="3"><div class="colstyle">企业联系方式</div></el-col>
                <el-col :span="12"><div class="padding">{{ qiyeInfo.phoneNumber }}</div></el-col>
            </el-row>
            <el-row>
                <el-col :span="3"><div class="colstyle" style="height:100px;line-height:100px;background:#EFEFEF;">经营范围</div></el-col>
                <el-col :span="21"><div class="padding" style="height:100px;overflow:auto;padding:10px 10px;">{{ qiyeInfo.businessScope }}</div></el-col>
            </el-row>
        </div>
        <el-link  type="info" :underline="false">*此数据来源于天眼查官方网站</el-link>
    </div>
    
</template>

<script>
import { formatDate } from "../../js/common";

export default {
    props: {
        companyName: {
            type: String,
            default: ''
        },
        nodeId: { //导航标签id
            type: String,
            default: ''
        }
    },
    data: () => ({
        qiyeInfo: {},
    }),
    methods: {
        //获取企业基本信息
        getQiYeInfo(){
            // const loading = this.$loading({
            //     lock: true,//lock的修改符--默认是false
            //     text: 'Loading',//显示在加载图标下方的加载文案
            //     spinner: 'el-icon-loading',//自定义加载图标类名
            //     background: 'rgba(0, 0, 0, 0.5)',//遮罩层颜色
            //     // target: document.querySelector('#table')//loadin覆盖的dom元素节点
            // });
            var that = this;
            this.$ajax({
                type:"get",
                url: `${this.$store.state.api.searchUrl}/searchtianyan/baseinfo`,
                data: {
                    corpName: that.companyName.replace(/,$/, ''),
                },
                callback:function(data, res){
                    // loading.close()
                    if (data.result) {
                        that.qiyeInfo = data.result;
                        this.$emit("pushValidNames",this.nodeId)
                    }
                }
            })
        },
    },
    watch: {
      companyName(){
          this.getQiYeInfo();
      }
    },
    mounted() {
        if(this.companyName) {
            this.getQiYeInfo();
        }
    },
    filters: {
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, "yyyy-MM-dd");
        }
    },
}
</script>

<style scoped lang="scss">
    .infoTable {
        border-bottom: 1px solid #efefef;
        padding:10px 0px;
    }
    .infoTable .el-row {
        border-top: 1px solid #efefef;border-left: 1px solid #efefef;border-right: 1px solid #efefef;
    }
    .infoTable .el-col {
        border-right: 1px solid #efefef;
        border-bottom: 1px solid white;
    }
    .padding {
        padding: 10px;
        font-size: 14px;
    }
    .colstyle {
        padding: 10px;
        background-color: #f5f5f5;
        font-size: 14px;
    }
</style>
